<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/cart.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <div class="c-top"></div>
   
    <div class="box1">
        <div class="item1">
            <p class="iconfont icon-youhuiquan-01"></p>
            <span>购物车可领优惠劵</span>
            <div class="item2">
                <p>领券</p>
            </div>
        </div>
        <div class="item3">暂时没有可领的优惠劵</div>
    </div>
    <div class="SH">
        <p class="ST">
            搜索想要的商品：<input type="text" class="search">
        </p>
        <p class="SC">
            排序：<select id="priceSort">
                <option value="1">默认排序</option>
                <option value="2">升序</option>
                <option value="3">降序</option>
            </select>
        </p>
    </div>
    <div class="top">
        <input type="checkbox">
            <ul>
            <li>全选</li>
            <li>商品信息</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
    </div>
    <div class="center">
        <div class="a1">
            <p>全场换购</p>
        </div>
        <p>已满足40元享超值换购</p>
        <div class="a2">
            <p>去换购</p>
        </div>
        <em><a href="./list.html">继续凑单>></a></em>
    </div>
    <section class="c-c">
        <!-- <div class="box">
            <input type="checkbox">
            <div class="img">
                <img src="./img/01.Jpg.png" alt="">
            </div> 
            <ul>
                <li>100%新疆棉，北欧风印花四件套</li>
                
            </ul>
            <p class="p1">￥339.00</p>
            <div class="box2">
                <div class="box3">
                    <button>-</button>
                    <p>1</p>
                    <button>+</button>
                </div>
                
            </div>
            <p class="p2">￥339.00</p>
            <dl>
                <dd>删除</dd>
            </dl>
        </div> -->
        
            <div class="empty">
                <p>当前购物车为空,<a href="./list.html">去选购</a>
                </p>
            </div>
        </section>
        <footer>
            <input type="checkbox" id="allCheck">
            <p class="p3"><label for="allCheck">全选</label></p>
            
           <div class="box5">
                <ul>
                    <li align="right">商品合计：</li>
                    <li id="allNum">0</li>
                </ul>
                
           </div>
            <div class="money">
                <p class="p1" align="right">总价</p>
                <span id="allPrice">0</span>
            </div>
            <p class="p6" id="delCheck">删除选中</p>
        </footer>
    
</body>
<script src="./libs/require.js" data-main="./js/cartMain"></script>
<script src="./libs/jquery.js"></script>
<script>
   
</script>
<script>
    $(".c-top").load("http://localhost:3000/modules/top.html #top" ,()=>{
        const ul = document.querySelector("header main article .i-nav > ul");
        $.ajax({
            url:"http://localhost:3000/api",
            data:{
                type:"getNav"
            },
            success:res=>{
                res = JSON.parse(res).data;
                // console.log(res);
                let str = "";
                res.forEach(val=>{
                    // 先生成内部的小的重复的结构
                    let m = "";
                    
                    for(let i in val.children){
                        let s = "";
                        for(let j in val.children[i]){
                            s += `<li><span>${val.children[i][j]}</span></li>`;
                            // ul.style.width="j*30"
                        }
                        m += `<li>
                            <span>${val.ltitle[i]}</span>
                            <ul>
                                ${s}
                            </ul>
                        </li>`
                    }
                    // 再生成大的主题结构，将小结构嵌套其中
                    str += `<li>
                            <span>${val.title}</span>
                            <ul>
                                ${m}
                            </ul>
                        </li>`

                })

                $(".i-nav").children("ul").html(str);
            }
        })
        // $(".i-nav").find("li").hover(function(){
        //     // 就算是jq的事件，在事件处理函数内，this也是原生DOM元素
        //     // 如果需要使用jq的DOM方法，需要转成jq的DOM元素
        //     // console.log($(this))

        //     // 无论几级菜单，只要结构一致
        //     // 都是鼠标进入li，显示子ul
        //     $(this).children("ul").stop().slideDown();
        // },function(){
        //     // 都是鼠标离开li，隐藏子ul
        //     $(this).children("ul").stop().slideUp();
        // })
        });
</script>
</html>
